<template>
  <div class="card-main-current">
    <!-- <vechart :options="options" /> -->

    <div class="card-item">
      <div class="item-left">
        <!-- <div class="item-no">
          <div class="item-content">序号</div>
          <div class="item-content">{{ index }}</div>
        </div> -->
        <div class="item-content">
          <div v-if="eqm.info.icon" :class="['main-item-img', eqm.info.icon]" />
          <div class="item-content-name"> {{ eqm.name }} </div>
        </div>
      </div>
      <div class="item-right">
        <vechart :options="realOptions" />
      </div>
    </div>
  </div>
</template>
<script>
import options from './options.json'
export default {
  components: {
    vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    eqm: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      options: options
    }
  },
  computed: {
    realOptions() {
      if (!this.eqm) {
        return this.options
      }
      return { ...this.options, series: { ...this.options.series, data: this.eqm.value }, xAxis: { ...this.options.xAxis, data: this.eqm.date }, yAxis: { ...this.options.yAxis, max: this.eqm.info.specCurrent }}
    }
  }
}
</script>

<style scoped>
.card-main-current{
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    border:none;
}

.card-item{
  display: flex;
  margin-bottom: 1rem;
  flex: 1;
}
.item-left{
  display: flex;
  flex:0 1 10%;
  background: rgba(6,72,119,0.4);
}
.item-right{
  flex: 3;
}
.item-content-name{
  overflow:hidden; /*超出的部分隐藏起来。*/
  white-space:nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出文本以省略号显示 */
}
.item-content{
  border: 1px solid #394c62;
  flex: 1 0;
  text-align: center;
  line-height: 40px;
  padding: 0 10px;
}
.item-no{
  width: 50%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: center;
}
.main-item-img{
  /* width: 80%; */
  margin: 0 5%;
  height: 60px;
  flex-grow: 0;
}
.Chiller {
  background: url('~@assets/csot/冰机.svg') no-repeat center top;
}
.Screw_Air_Compressor {
  background: url('~@assets/csot/螺杆空压机.svg') no-repeat center top
}
.Air_Compressor {
  background: url('~@assets/csot/离心空压机.svg') no-repeat center top;
}

</style>

